<template>
  <section>
    <div class="top" >
      <img :src="'/api/file/' + activity.activityPicture" alt="">
      <p>{{ activity.title }}</p>
<!--      <span class="pictrue" @click="tap(activity.id)">我的图集</span>-->
    </div>
    <div class="wrapper">
      <div class="caption">
        <p>
          <van-icon name="clock-o" size="16" /><span
        >{{ activity.startTime }} 至 {{ activity.endTime }}</span
        >
        </p>
        <p>
          <van-icon name="location-o" size="16" /><span>{{
            activity.address
          }}</span>
        </p>
        <p>
          <van-icon name="friends-o" size="16" /><span
        >已报名 {{ activity.enterNum }} / {{activity.limitNum?'限报名':'不限'}}
            {{ activity.limitNum }}</span
        >
        </p>
      </div>
      <template v-if="activity.attachment.length>0">
        <h2>附件</h2>
        <div class="attachment" v-for="(item,index) in activity.attachment">
          <p >
            {{index+1}}：<a :href="`/api/file/${item.url}`" target="_black">{{item.originName}}</a>
          </p>
        </div>
      </template>
      <h2>活动简介</h2>
      <div class="content">
        {{ activity.introduce }}
      </div>
      <template v-if="activity.notes">
      <h2>报名须知</h2>
      <div class="content">
        {{ activity.notes }}
      </div>
      </template>
    </div>
<!--    <div class="caption">-->
<!--      <p>{{activity.title}}</p>-->
<!--      <span>{{ activity.startTime }} 至 {{ activity.endTime }}</span>-->
<!--    </div>-->
<!--    <div class="content">-->
<!--      {{ activity.introduce }}-->
<!--    </div>-->
<!--    <div class="content">-->
<!--      {{"报名须知：" + activity.notes }}-->
<!--    </div>-->
    <tabbar :index="index" />
  </section>
</template>

<script>
import api from "@/data/api/index.js";
import tabbar from "../../components/tabbar.vue";

export default {
  components: { tabbar },
  data() {
    return {
      index: 2,
      activity: {
        activityPicture:'',
        attachment:[]
      }
    };
  },
  mounted (){
    this.urlData = JSON.parse(this.$route.query.tdata);
    this.getActivityDetail(this.urlData.id)
  },
  methods: {
    tap(id) {
      var data = { id };
      this.$troute.query("myImg",data);
    },
    getActivityDetail(id) {
      api.activityDetail(id).then((res) => {
        if (res.startTime) {
          res.startTime = res.startTime.substring(0,16);
        }
        if (res.endTime) {
          res.endTime = res.endTime.substring(0,16);
        }
        this.activity = res;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
  section {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(100% - 46px);
    > p {
      position: fixed;
      left: 20px;
      right: 20px;
      bottom: 15px;
      line-height: 50px;
      color: #fff;
      font-size: 20px;
      text-align: center;
      background-color: #9e0f16;
      border-radius: 25px;
      z-index:50
    }
  }
  .top {

    background: #931116 url(../imgs/activity-bg.png) no-repeat right bottom;
    background-size: contain;
    position: relative;
    >img{
      width: 100%;
    }
    p {
      position: absolute;
      top: 60px;
      left: 20px;
      transform: translate(0%,-20%);
      color: #fff;
      font-size: 28px;
    }
    .pictrue{
      display: inline-block;
      position: absolute;
      left:0;
      bottom:65px;
      font-size: 14px;
      background: rgba(0,0,0,.5);
      padding: 5px 20px 7px 20px;
      border-radius: 0 15px 15px 0;
      color: #fff;
    }
  }
  .wrapper {
    width: 100vw;
    margin-top: -50px;
    box-sizing: border-box;
    overflow: auto;
    padding: 20px 20px 80px 20px;
    border-radius: 50px 0 0 0;
    background-color: #fff;
    position: relative;
    > h2 {
      position: relative;
      display: inline-block;
      font-size: 20px;
      margin: 0 0 15px 10px;
      z-index: 1;
      &::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 1px;
        height: 5px;
        background-color: #c9151e;
        z-index: -1;
      }
    }
    .caption {
      margin: 0 0 15px 10px;
      p {
        display: flex;
        align-items: center;
        line-height: 1.75em;
        color: #666;
        span {
          margin-left: 10px;
        }
      }
    }
    .content {
      line-height: 1.75em;
      font-size: 15px;
      text-indent: 2em;
      text-align: justify;
      p {
        margin: 1em 0;
      }
    }
    .attachment{
      line-height:1.8;
      font-size: 15px;
      margin-left:15px;
      p{
        margin-bottom:5px;
      }
    }
  }
/*section {*/
/*  padding: 50px 15px 15px;*/
/*  .caption {*/
/*    padding-bottom: 10px;*/
/*    margin-bottom: 15px;*/
/*    border-bottom: 2px solid #eee;*/
/*    p {*/
/*      line-height: 1.5em;*/
/*      margin-bottom: 5px;*/
/*      font-size: 22px;*/
/*    }*/
/*    span {*/
/*      color: #999;*/
/*    }*/
/*  }*/
/*  .content{*/
/*    line-height: 1.75em;*/
/*    font-size: 15px;*/
/*    text-indent: 2em;*/
/*    text-align: justify;*/
/*  }*/
/*}*/

</style>
